<template>

  <el-popover :placement="getPopDirection(info)" :visible="isShowPanel" :show-arrow="false" popper-class="nopopper" :offset="getOffsetPosition(info)">
    <template #reference>
      <LocationPoint :location="{x: info.x, y: info.y}" :class="{topindex: isShowPanel}">
        <div class="CameraOnMap">
          <div class="CameraOnMap--img" @click.stop="showDetail">
            <img src="@/assets/images/armyScreen/摄像头_预警@2x.png" />
          </div>
          <!--<div class="CameraOnMap&#45;&#45;content" v-if="isShowPanel">-->
          <!--  <MapWarnPanel :info="info" @close="closeAction"></MapWarnPanel>-->
          <!--</div>-->
        </div>
      </LocationPoint>
    </template>
    <MapWarnPanel :info="info" @close="closeAction" v-if="isShowPanel"></MapWarnPanel>
  </el-popover>
</template>

<script setup>
import MapWarnPanel from '@/views/armyScreen/warehouse/center/MapWarnPanel.vue'
import LocationPoint from '@/views/armyScreen/warehouse/center/LocationPoint.vue'
import $bus from '@/util/bus.js'
import MapVedioPanel from "@/views/armyScreen/warehouse/center/MapVedioPanel.vue";
const props = defineProps({
  detail: { // 是否打开详情, 默认是 false，表示不打开
    type: Boolean,
    default: false
  },
  info: {
    type: Object,
    default() {
      return {
        // "cameraIndexCode": "d90970f42f2e4393ba2de8a8dfaece6c",
        // "cameraName": "研发大会议室",
        // "x": "123",
        // "y": "32",
        // "hasAlarm": true,
        // "alarmRecord": [
        //   {
        //     "time": "2023-10-09 11:10:12",
        //     "location": "1号油料库",
        //     "alarmType": "震动光纤报警"
        //   },
        //   {
        //     "time": "2023-10-09 12:10:12",
        //     "location": "1号收发室",
        //     "alarmType": "温度异常报警"
        //   }
        // ]
      }
    }
  }
})

/*********** 生命周期 ************/
onMounted(() => {
  if (props.detail) {
    showDetail()
    hasClosed.value = false // 初始化的时候，让状态标记为用户没有手动关闭，一旦用户手动关闭，就不会自动触发关闭了
    setTimeout(() => {
      if (hasClosed.value) {
        return
      }
      closeAction()
    }, 10 * 1000) // 30秒自动关闭详情
  }
})
onBeforeMount(() => {
  $bus.on('hidePanel', closeAction)
})

onBeforeUnmount(() => {
  $bus.off('hidePanel', closeAction)
})

// 获取弹窗的位置
function getPopDirection(info) {
  const { x, y } = info
  let direction = ''
  const yMiddle = 1080 / 2
  // const xMiddle = 1920 / 2
  const leftPanel = 400
  const rightPanel = 1920 - leftPanel
  if (x < leftPanel) {
    // 在左侧面板内，靠右显示
    direction = 'right'
  } else if (x > rightPanel) {
    direction = 'left'
  } else if (y > yMiddle) {
    direction = 'top'
  } else if (y <= yMiddle) {
    direction = 'bottom'
  }
  return direction
}

function getOffsetPosition(info) {
  const direction = getPopDirection(info)
  if (direction === 'top') {
    return 45
  } else {
    return 0
  }
}

/*********** 显示和隐藏详情面板 ************/
const isShowPanel = ref(false)
function showDetail () {
  $bus.emit('hidePanel')
  isShowPanel.value = true
}

const hasClosed = ref(false) // 是否关闭过，如果已经关闭过了，则定时关闭请求失效
function closeAction () {
  hasClosed.value = true
  isShowPanel.value = false
}
</script>

<style lang="scss" scoped>
.CameraOnMap{
  position: absolute;
  left: -27px;
  top: -60px;
  pointer-events: all;
  &--img{
    width: 53px;
    height: 68px;
    cursor: pointer;
    img{
      width: 100%;
      height: auto;
    }
  }
}
</style>
